<template>
	<view>
		<!-- 话题介绍 -->
		<topic-info :item="topicInfo"></topic-info>
		<!-- tabbar切换 -->
		<swiper-tab-head
		:tabBars="tabBars" 
		:tabIndex="tabIndex"
		@tabtap="tabtap"
		scrollItemStyle="width:50%;"
		scrollStyle="border-bottom:0;">
		</swiper-tab-head>
		<!-- 列表 -->
		<view class="topic-detaillist">
			<block v-for="(item,index) in tablist" :key="index">
				<template v-if="tabIndex==index">
					<!-- 列表 -->
					<block v-for="(list,listindex) in item.list" :key="listindex">
						<common-list :item="list" :index="listindex"></common-list>
					</block>
					<!-- 上拉加载 -->
					<load-more :loadtext="item.loadtext"></load-more>
				</template>
			</block>
		</view>
	</view>
</template>

<script>
	import topicInfo from "../../components/topic/topic-info.vue"
	import swiperTabHead from "../../components/index/swiper-tab-head.vue";
	import commonList from "../../components/common/common-list.vue"
	import loadMore from "../../components/common/load-more.vue";
	export default {
		components:{
			topicInfo,
			swiperTabHead,
			commonList,
			loadMore
		},
		data() {
			return {
				topicInfo:{
					titlepic:"../../static/img/light.jpg",
					title:"死亡如风，常伴吾身",
					desc:"我是描述",
					totalnum:1000,
					todaynum:1000
				},
				tabIndex:0,
				tabBars:[
					{name:'默认',id:'moren'},
					{name:'最新',id:'zuixin'}
				],
				tablist:[
					{
						loadtext:"上拉加载更多",
						list:[
							//文字
							{
								//文字列表
								userpic:'../../static/img/ez.png',
								username:'伊泽瑞尔',
								sex:0, //0 男 1 女
								age:18,
								isguanzhu:false,
								title:'是时候表演真正的技术了！',
								titlepic:'',
								video:false,
								share:false,
								path:'上海 浦东',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//文字列表
								userpic:'../../static/img/daofeng.jpg',
								username:'刀锋之影',
								sex:0, //0 男 1 女
								age:18,
								isguanzhu:false,
								title:'只有傻瓜,才会为了荣誉而献身。',
								titlepic:'',
								video:false,
								share:false,
								path:'深圳 龙岗',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//文字列表
								userpic:'../../static/img/xiazi.jpg',
								username:'盲僧',
								sex:0, //0 男 1 女
								age:18,
								isguanzhu:false,
								title:'勇往直前,职责所在',
								titlepic:'',
								video:false,
								share:false,
								path:'湖北 宜昌',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//文字列表
								userpic:'../../static/img/yasuo.jpg',
								username:'亚索',
								sex:0, //0 男 1 女
								age:18,
								isguanzhu:false,
								title:'长路漫漫，唯剑作伴！',
								titlepic:'',
								video:false,
								share:false,
								path:'日本 东京',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//文字列表
								userpic:'../../static/img/timo.jpg',
								username:'提莫',
								sex:0, //0 男 1 女
								age:18,
								isguanzhu:false,
								title:'提莫队长正在待命!！',
								titlepic:'',
								video:false,
								share:false,
								path:'云南 昆明',
								sharenum:20,
								commentnum:30,
								goodnum:20
							}
						]
					},
					{
						loadtext:"上拉加载更多",
						list:[
							{
								//图文列表
								userpic:'../../static/img/ruiwen.jpg',
								username:'锐雯',
								sex:1, //0 男 1 女
								age:25,
								isguanzhu:false,
								title:'艾欧尼亚！',
								titlepic:'../../static/img/ruiwen-img.jpg',
								video:false,
								share:false,
								path:'美国 纽约',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//图文列表
								userpic:'../../static/img/daomei-img.jpg',
								username:'艾瑞利亚',
								sex:1, //0 男 1 女
								age:25,
								isguanzhu:false,
								title:'艾欧尼亚！',
								titlepic:'../../static/img/daomei.jpg',
								video:false,
								share:false,
								path:'广东 深圳',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//图文列表
								userpic:'../../static/img/yasuo.jpg',
								username:'亚索',
								sex:0, //0 男 1 女
								age:25,
								isguanzhu:false,
								title:'艾欧尼亚！',
								titlepic:'../../static/img/yasuo-img.jpg',
								video:false,
								share:false,
								path:'日本 东京',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
							{
								//图文列表
								userpic:'../../static/img/daofeng.jpg',
								username:'刀锋之影',
								sex:1, //0 男 1 女
								age:25,
								isguanzhu:false,
								title:'艾欧尼亚！',
								titlepic:'../../static/img/daofeng-img.jpg',
								video:false,
								share:false,
								path:'深圳 龙岗',
								sharenum:20,
								commentnum:30,
								goodnum:20
							},
						]
					},
				]
			}
		},
		onReachBottom(){
			this.loadmore()
		},
		onPullDownRefresh(){
			this.getdata()
		},
		methods: {
			//上拉刷新
			getdata(){
				setTimeout(()=>{
					let arr = [
						{
							//文字列表
							userpic:'../../static/img/ez.png',
							username:'伊泽瑞尔',
							sex:0, //0 男 1 女
							age:18,
							isguanzhu:false,
							title:'是时候表演真正的技术了！',
							titlepic:'',
							video:false,
							share:false,
							path:'湖北 宜昌',
							sharenum:20,
							commentnum:30,
							goodnum:20
						},
						{
							//图文列表
							userpic:'../../static/img/daomei-img.jpg',
							username:'艾瑞利亚',
							sex:1, //0 男 1 女
							age:25,
							isguanzhu:false,
							title:'艾欧尼亚！',
							titlepic:'../../static/img/daomei.jpg',
							video:false,
							share:false,
							path:'广东 深圳',
							sharenum:20,
							commentnum:30,
							goodnum:20
						},
						//视频
						{
							//图文列表
							userpic:'../../static/img/fox-img.jpg',
							username:'阿狸',
							sex:1, //0 男 1 女
							age:15,
							isguanzhu:false,
							title:'摸索着，跌倒着，彷徨着，浮躁着......',
							titlepic:'../../static/img/ali.jpg',
							video:{
								looknum:'20w',
								long:'2:47'
							},
							share:false,
							path:'四川 成都',
							sharenum:20,
							commentnum:30,
							goodnum:20
						},
						//分享
						{
							userpic:'../../static/img/kasha-img.jpg',
							username:'卡莎',
							sex:1, //0 男 1 女
							age:20,
							isguanzhu:false,
							title:'我不用想象，我去过那里',
							titlepic:'',
							video:false,
							share:{
								title:'',
								titlepic:'../../static/img/kasha.jpg'
							},
							path:'上海 浦东',
							sharenum:20,
							commentnum:30,
							goodnum:20
						}
					];
					this.tablist[this.tabIndex].list = arr
					uni.stopPullDownRefresh()
				},2000)
			},
			loadmore(){
				if(this.tablist[this.tabIndex].loadtext!=='上拉加载更多'){return;}
				//修改状态
				this.tablist[this.tabIndex].loadtext="加载中...";
				//获取数据
				setTimeout(()=>{
					//获取完成
					let obj = {
							userpic:"../../static/img/daofeng.jpg",
							username:"木木的奇奇",
							sex:1,
							age:33,
							isguanzhu:false,
							title:"万人敬仰背后的失落感",
							titlepic:"../../static/img/daofeng-img.jpg",
							video:false,
							share:false,
							path:"深圳 龙岗",
							sharenum:20,
							commentnum:30,
							goodnum:20
					};
					this.tablist[this.tabIndex].list.push(obj)
					this.tablist[this.tabIndex].loadtext='上拉加载更多'
				},1000)
			},
			// tabbar点击事件
			tabtap(index){
				this.tabIndex=index
			},
		}
	}
</script>

<style>
</style>
